<template name="noteBox">
	<view class="note">
		<view class="noteBlock" v-for="(item , index) in noteView" :key="index">
			<navigator hover-class="none" :url="`/pages/details/${item.url}`">
				<view class="scroll_title"><text class="iconfont" :class="item.hotIcon"></text>{{item.title}}</view>
				<view class="scroll_center"><text class="iconfont" :class="item.goodIcon"></text>{{item.content}}</view>
			</navigator>
			<view class="scroll_footer">
				<text class="row_line" @click="removeBtn(item,index)">
					<text class="iconfont" :class="item.removeIcon" :style="{'color':item.color}"></text>{{item.remove}}
				</text>
				<text class="row_line">{{item.answer}}</text>
				<text class="row_line"><text class="iconfont" :class="item.readIcon"></text>{{item.read}}</text>
				<text class="row_line"><text class="iconfont" :class="item.praiseIcon"></text>{{item.praise}}</text>
				<text class="row_line"><text class="iconfont" :class="item.discussIcon"></text>{{item.discuss}}</text>
				<text class="row_line" @click="deleteBtn(item,index)"><text class="iconfont" :class="item.deleteIcon"></text></text>
			</view>
			<view class="state">
				<image :src="item.stateUrl"></image>
			</view>
		</view>
	</view>
</template>
<script>
export default{
	name:"noteBox",
	props:{
			noteView:{
				url:{
					type: String,
					default: ''
				},
				hotIcon:{
					type: String,
					default: ''
				},
				title:{
					type: String,
					default: ''
				},
				goodIcon:{
					type: String,
					default: ''
				},
				content:{
					type: String,
					default: ''
				},
				readIcon:{
					type: String,
					default: ''
				},
				discussIcon:{
					type: String,
					default: ''
				},
				praiseIcon:{
					type: String,
					default: ''
				},
				read:{
					type: String,
					default: ''
				},
				answer:{
					type: String,
					default: ''
				},
				discuss:{
					type: String,
					default: ''
				},
				praise:{
					type: String,
					default: ''
				},
				stateUrl:{
					type: String,
					default: ''
				},
				removeIcon:{
					type: String,
					default: ''
				},
				remove:{
					type: String,
					default: ''
				},
				deleteIcon:{
					type: String,
					default: ''
				}
			}
			
		},
	data(){
		return{
		}
	},
	methods:{
		removeBtn(item,index){
			console.log("取消收藏")
			uni.showModal({
			    title: '',
			    content: "确认不收藏这篇笔记嘛",
				success: function (res) {
					if (res.confirm) {
						console.log('点击确定');
					} else if (res.cancel) {
						console.log('点击取消');
					}
				}
			});
		},
		deleteBtn(item,index){
			console.log("删除笔记")
			uni.showModal({
			    title: '',
			    content: "确认删除这篇笔记嘛",
				success: function (res) {
					if (res.confirm) {
						console.log('点击确定');
					} else if (res.cancel) {
						console.log('点击取消');
					}
				}
			});
		}
	}
}		
</script>

<style lang="scss">
	@import "../../icon/iconfont.css";
		.noteBlock{
			position: relative;
			margin-bottom:$uni-spacing-row-sy;
			position: relative;
			width: 100%;
			letter-spacing: $uni-spacing-row-one;
			.scroll_title{
				font-size: $uni-font-size-lg;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				.iconfont{
					color: $uni-color-error;
					font-size: $uni-img-size-six;
				}
			}
			.scroll_center{
				color: $uni-text-color-placeholder;
				font-size: $uni-font-size-base;
				padding: 10rpx 0 4rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
				.iconfont{
					color: rgb(0, 147, 233);
					font-size: $uni-img-size-six;
				}
			}
			.scroll_footer{
				padding: 18rpx 0 10rpx;
				font-size: $uni-font-size-six;
				display: inline-block;
				position: relative;
				width: 100%;
				.row_line{
					padding-right: $uni-spacing-row-lg;
					&:nth-child(-n+2){
						padding: 0;
					}
					&:last-child{
						padding: 0;
						position: absolute;
						top:6rpx;
						right: 0;
						.iconfont{
							font-size: $uni-img-size-six;
						}
					}
				}
				.iconfont{
					font-size: $uni-font-size-lg;
					padding-right: $uni-border-radius-sm;
				}
			}
			&::after{
				position: absolute;
				left: 0;
				bottom:-20rpx;
				content: '';
				width: 100%;
				height: $uni-spacing-row-one;
				background-color: #F6F6F6;
			}
			&:last-child{
				margin-bottom: 0;
			}
			&:last-child::after{
				display: none;
			}
			.state{
				position: absolute;
				right: 0;
				top:0;
				z-index: 1;
				image{
					width:$uni-img-size-lgsa;
					height: $uni-img-size-lgsa;
				}
			}
		}
		.modal-bd{
			color: red;
		}
</style>
